
<template>

  <h1>
    使用接口数据，代理跨域。
  </h1>
  
  <div>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getData"
    >
      <van-row class="brr" justify="space-around">
        <van-col span="4">姓名</van-col>
        <van-col span="4">年龄</van-col>
        <van-col span="4">学号</van-col>
      </van-row>
      <van-row
        class="br"
        justify="space-around"
        v-for="item in bookData.list"
        :key="item.name"
      >
        <van-col span="4">{{ item.correct_answer }}</van-col>
        <van-col span="4">{{ item.question }}</van-col>
        <van-col span="4">{{ item.type }}</van-col>
      </van-row>

      <van-cell />
    </van-list>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import {request,request_url} from '../../js/request'


const loading = ref(false);
const finished = ref(false);

const getData = function () {

  //获取列表数据
  request({
    url: request_url.list,
    method: "get",
  })
    .then((res) => {
      bookData.list = res.data.results;
      console.log(res.data.results);
    })
    .catch((error) => {
      console.log(error);
    });
};

const bookData = reactive({
  list: []
});
</script>

<style scoped>
.br {
  font-size: 18px;
  border-bottom: 1px solid beige;
  margin: 10px 20px;
}
.brr {
  font-size: 24px;
  border-bottom: 1px solid red;
}
</style>